 // eslint-disable-next-line
<template>
  <div class="dashboard-editor-container">
    <!-- 顶部内容 -->
    <el-row class="panel-group" :gutter="40">

      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-money">
            <icon-svg icon-class="eye" class-name="card-panel-icon" name="eye"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">教师用户数：</div>
            <count-to class="card-panel-num" :startVal="0" :endVal="teacherTotal" :duration="3200"></count-to>
          </div>
        </div>
      </el-col>

     <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-people" @click="btnClick('2')">
            <icon-svg icon-class="peoples" class-name="card-panel-icon" name="peoples"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">学生用户数:</div>
            <count-to class="card-panel-num" :startVal="0" :endVal="studentTotal" :duration="2600"></count-to>
          </div>
        </div>
      </el-col>

      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-message" @click="btnClick('3')">
            <icon-svg icon-class="message" class-name="card-panel-icon" name="message"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">课程总数：</div>
            <count-to class="card-panel-num" :startVal="0" :endVal="courserTotal" :duration="3000"></count-to>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-shoppingCard" @click="btnClick('4')">
            <icon-svg icon-class="form" class-name="card-panel-icon" name="form"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">发布任务数:</div>
            <count-to class="card-panel-num" :startVal="0" :endVal="taskTotal" :duration="3600"></count-to>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
           <el-form-item label="实验名称">
             <el-select v-model="dataForm.uuid" @change="changeStatistics()" placeholder="请选择"style="width: 280px;"clearable>
                 <el-option
                   v-for="item in experimentName"
                   :key="item.uuid"
                   :label="item.experimentName"
                   :value="item.uuid">
                 </el-option>
               </el-select>
           </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <div class="mod-demo-echarts">
      <el-card>
        <div id="J_chartPieBox" class="chart-box"></div>
      </el-card>
    </div>
</div>
</template>

<script>
  /* eslint-disable */
  import CountTo from "vue-count-to";
  import Icon from '@/icons'
  import echarts from 'echarts'

export default{
  components:{CountTo,Icon,echarts},
    data(){
        return{
         teacherTotal: 0,
         studentTotal: 0,
         courserTotal: 0,
         taskTotal: 0,
         dataForm: {
           uuid: ''
         },
         experimentName: [],
         chartPie: null,
         selectCourse:[]
        }
    },
    mounted() {
      this.initChartPie()
    },
    created(){

    },
    activated () {
      this.getExperimentList()
      if (this.chartPie) {
        this.chartPie.resize()
      }
    },
    methods:{
      changeStatistics(){
        this.$http({
          url: this.$http.adornUrl('/statistics/getSelectCourseStatistics'),
          method: 'get',
          params: this.$http.adornParams({
           'uuid': this.dataForm.uuid
          })
        }).then(({data}) => {
          if(data.success){
            this.selectCourse = data.data
             this.initChartPie()
          } else {
            this.$message.error(data.message)
          }
        })
      },
      // 获取统计数据
     getStatistics (){
       this.$http({
         url: this.$http.adornUrl('/statistics/getStatistics'),
           method: 'get',
       }).then(({data}) => {
         if(data.success){
           this.teacherTotal = data.data.teacherTotal,
           this.courserTotal = data.data.courserTotal,
           this.taskTotal = data.data.taskTotal
         } else {
           this.$message.error(data.message)
         }
       })
     },
      // 饼状图
      initChartPie () {
        var option = {
          backgroundColor: '#273471',
          title: {
            text: '选课人数统计',
            left: 'center',
            top: 20,
            textStyle: {
              color: '#ccc'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          visualMap: {
            show: false,
            min: 500,
            max: 600,
            inRange: {
              colorLightness: [0, 1]
            }
          },
          series: [
            {
              name: '选课统计',
              type: 'pie',
              radius: '55%',
              center: ['50%', '50%'],
              data: (this.selectCourse).sort(function (a, b) { return a.value - b.value }),
              label: {
                normal: {
                  textStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                  }
                }
              },
              labelLine: {
                normal: {
                  lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                  },
                  smooth: 0.2,
                  length: 10,
                  length2: 20
                }
              },
              itemStyle: {
                normal: {
                  color: '#f4516c',
                  shadowBlur: 200,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              animationType: 'scale',
              animationEasing: 'elasticOut',
              animationDelay: function (idx) {
                return Math.random() * 200
              }
            }
          ]
        }
        this.chartPie = echarts.init(document.getElementById('J_chartPieBox'))
        this.chartPie.setOption(option)
        window.addEventListener('resize', () => {
          this.chartPie.resize()
        })
      },
      // // 获取所有的实验
      getExperimentList () {
        this.$http({
          url: this.$http.adornUrl('/adminCourse/getExperimentName'),
            method: 'get',
        }).then(({data}) => {
          if(data.success){
            this.experimentName = data.data
            this.dataForm.uuid = data.data[0].uuid
            console.log("获取实验的时候this.dataForm.uuid",this.dataForm.uuid)
            this.getStatistics()
            this.changeStatistics()
          } else {
            this.$message.error(data.message)
          }
        })
      },
    }
}
</script>

<style lang="scss" scoped>
  .panel-group {
    margin-top: 18px;

    .card-panel-col {
      margin-bottom: 32px;
    }

    .card-panel {
      height: 108px;
      cursor: pointer;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
      background: #fff;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
      border-color: rgba(0, 0, 0, 0.05);
      &:hover {
        .card-panel-icon-wrapper {
          color: #fff;
        }
        .icon-people {
          background: #273471;
        }
        .icon-message {
          background: #f4516c;
        }
        .icon-money {
          background: #f4516c;
        }
        .icon-shoppingCard {
          background: #273471;
        }
      }
      .icon-people {
        color: #273471;
      }
      .icon-message {
        color: #f4516c;
      }
      .icon-money {
        color: #f4516c;
      }
      .icon-shoppingCard {
        color: #273471;
      }
      .card-panel-icon-wrapper {
        float: left;
        margin: 14px 0 0 14px;
        padding: 16px;
        transition: all 0.38s ease-out;
        border-radius: 6px;
      }
      .card-panel-icon {
        float: left;
        font-size: 48px;
      }
      .card-panel-description {
        float: left;
        font-weight: bold;
        margin: 26px 0 0 70px;
        .card-panel-text {
          line-height: 18px;
          color: rgba(0, 0, 0, 0.45);
          font-size: 16px;
          margin-bottom: 12px;
        }
        .card-panel-num {
          font-size: 20px;
        }
      }
    }
  }
  .mod-demo-echarts {
    width: 500px;
    > .el-row {
      margin-top: -10px;
      margin-bottom: -10px;
      .el-col {
        padding-top: 10px;
        padding-bottom: 10px;
      }
    }
    .chart-box {
      min-height: 300px;
    }
  }
</style>
